<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { sensorByIdData } from '@T2/service/api.ts';
import * as echarts from 'echarts';
import dayjs from 'dayjs';

const props = defineProps({
  /* 确保该组件调用时sensors.length > 0 */
  sensors: {
    type: Array,
    required: true,
  },
  count: {
    type: Number,
    required: true,
  },
  topic: {
    type: String,
    required: true,
  }
});
const TopicFrom = ['#ffffff', '#022625'].includes(props.topic.toLowerCase()) ? props.topic.toLowerCase() : '#ffffff';
const Topic = {
  '#ffffff': {
    xAxis: 'rgba(0,0,0,0.45)',
    yAxis: 'rgba(0,0,0,0.15)',
    textStyle: '#8C8C8C',
  },
  '#022625': {
    xAxis: 'rgba(255,255,255,0.45)',
    yAxis: 'rgba(255,255,255,0.15)',
    textStyle: '#8C8C8C',
  },
}[TopicFrom];

const onlyRef = ref(null);
let myChart = null;
onMounted(() => {
  myChart = echarts.init(onlyRef.value);
  option.series = [];
  loadSensorsData();
});
watch(() => props.count, (nv, ov) => {
  if (nv) {
    Resd.finishNums = 0;
    option.series = [];
    loadSensorsData();
  }
})

const Resd = reactive({
  finishNums: 0,
});
const loadSensorsData = () => {
  if (Resd.finishNums >= props.sensors.length) {
    Resd.finishNums = 0;
    return;
  }
  let sensor = props.sensors[Resd.finishNums];
  sensorByIdData({
    method: 'get',
    id: sensor.id,
    params: {
      page: 1,
      pagesize: props.count,
      ordering: '-create_time',
    }
  }).then(res => {
    let datas = res.results?.map(item => {
      return [item.create_time, item.data];
    })
    option.yAxis.name = sensor.unit;
    option.series.push({
      name: sensor.name,
      type: 'line',
      data: datas,
      showSymbol: false,
    });
    myChart.setOption(option);
    Resd.finishNums ++;
    loadSensorsData()
  });
}
const option = {
  animation: true,										  	  //是否开启动画
  backgroundColor: 'rgba(0, 18, 24, 0)',    //无背景颜色
  color: ["#376AE4", "#1BC0C5", '#91cc75', '#fac858', '#ee6666', '#73c0de', '#fc8452', '#9a60b4', '#ea7ccc'],
  series: [],                               //系列
  tooltip: {
    trigger: 'axis',                        //axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
  },
  legend: {
    icon: 'rect',                        //图例icon
    bottom: 0,                           //图例距容器顶部距离
    itemWidth: 18,                       //图例图形宽度
    itemHeight: 12,                      //图例图形高度
    textStyle: {
      color: Topic.textStyle,            //图例文字颜色
      fontSize: 12,                      //图例文字大小
    },
  },
  grid: {
    containLabel: true,                 //为true表示外边 距离 包含刻度标签在内的整个图表
    bottom: 30,                         //网格离容器底部距离
    right: 24,                          //网格离容器右侧距离
    left: 12,                           //网格离容器左侧距离
    top: 30,                            //网格离容器顶部距离
  },
  xAxis: {
    boundaryGap: false,                   //boundaryGap值为false的时候，折线第一个点在y轴上
    type: 'time',                         //时间轴
    splitNumber: 5,
    axisLine: {
      lineStyle: {
        width: 1,
        color: Topic.xAxis,
      }
    },
    axisLabel: {
      color: Topic.xAxis,
      fontSize: 12,
      fontFamily: 'Helvetica',
      formatter: (value) => dayjs(value).format('MM-DD\nHH:mm'),
    },
  },
  yAxis: {
    type: 'value',
    splitLine: {
      lineStyle: {
        color: Topic.yAxis,
      }
    },
    axisLabel: {
      color: Topic.yAxis,
      fontFamily: 'Helvetica',
      fontWeight: 400,
      lineHeight: 14,
      fontSize: 12,
    },
    nameTextStyle: {
      color: Topic.textStyle,             //坐标轴名称字体颜色
      fontSize: 12,                       //坐标轴名称字体大小
    },
  },
}
</script>

<template>
  <div ref="onlyRef" />
</template>

<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>